<template>
  <div style="background-color: #efefef">
    <van-sticky>
      <!-- 头部搜索框位置  -->
      <van-nav-bar title="活动">
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <!-- 本周活动 -->
    <div style="background-color: #fff">
      <div style="
          display: flex;
          justify-content: flex-start;
          height: 40px;
          align-items: center;
          margin: 0 10px 0 20px;
        ">
        <span style="
            width: 4px;
            height: 20px;
            background-color: #73a6d9;
            display: inline-block;
          "></span>
        <span style="display: inline-block; margin-left: 10px; font-size: 1.2em">本周活动</span>
      </div>

      <demoCircle></demoCircle>
    </div>
    <!--  第二楼 优惠活动  -->
    <span style="
            width: 4px;
            height: 20px;
            background-color: #73a6d9;
            display: inline-block;
            margin-left: 20px;
            margin-top: 10px;
          "></span>
    <span style="display: inline-block;margin: 10px 10px 10px 10px; font-size: 1.2em">优惠活动</span>
    <van-swipe style="height: 200px; margin: 10px 0;" vertical class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img style="height:100%; width: 100%;"
          src="https://img2.baidu.com/it/u=934447643,2694651031&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img style="height:100%; width: 100%;"
          src="https://img0.baidu.com/it/u=1753108426,3188066834&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img style="height:100%; width: 100%;"
          src="https://img1.baidu.com/it/u=3470642649,2232729002&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img style="height:100%; width: 100%;"
          src="https://img1.baidu.com/it/u=1184505808,227517528&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=495" alt="">
      </van-swipe-item>


    </van-swipe>
    <!-- 第三楼 相关活动-->
    <span style="
            width: 4px;
            height: 20px;
            background-color: #73a6d9;
            display: inline-block;
            margin-left: 20px;
            margin-top: 10px;
          "></span>
    <span style="display: inline-block;margin: 10px 10px 10px 10px; font-size: 1.2em">相关活动</span>
    <div class="my" v-for="item in premium" :key="item.id"  @click="$router.push({ path: '/activity/activity-four-view', query: { id: item.id } })"  >
      <img :src="item.images" alt="" />
      <div class="right">
        <van-text-ellipsis :content="item.title" />
        <van-text-ellipsis :content="item.labels" />
        <div class="right_x">
          <div>
            <van-icon name="chat-o" />{{ item.numpl }}
            <van-icon name="star-o" />{{ item.numx }}
          </div>
          <span>{{ item.timea }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import myaxios from "@/http/MyAxios";
import { onMounted, ref } from "vue";

// 精品优选
const premium = ref();

onMounted(() => {
  let url = "http://127.0.0.1:5000/actweek/actweekunder";
  myaxios.get(url).then((res) => {
    console.log("结果", res);
    premium.value = res.data.data;
  });
});
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 200px;
  text-align: center;
  background-color: #39a9ed;

}

.my {
  height: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #eee;
  background-color: #fff;

  img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    margin-left: 20px;
  }
}

.right {
  box-sizing: border-box;
  padding: 0 10px;
  width: calc(100% - 80px);
}

.right .right_x {
  display: flex;
  justify-content: space-between;
}
</style>